<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-03-08 17:03:01
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\form\uiDropdown\uiDropdown.vue
 * CIMC-V2
-->
<template>
  <div :class="['p-' + info.extension.padding.value, { hidden: conditionProperty.hidden || info.extension.hidden.value }]">
    <el-dropdown
      v-if="onShow"
      :ref="info._id"
      v-ui-ref="vSetRef"
      :disabled="conditionProperty.disabled || info.extension.disabled.value"
      :trigger="dropdownTrigger"
      @command="dropdownChange"
    >
      <el-button
        :circle="info.extension.circle.value"
        :plain="info.extension.plain.value"
        :round="info.extension.round.value"
        size="mini"
        type="primary"
      >
        <vui-icon v-if="info.extension.icon.value" :icon="info.extension.icon.value" />
        {{ info.extension.btnName.value }}
        <!-- <el-icon class="el-icon--right"><arrow-down /></el-icon> -->
        <vui-icon icon="arrow-down-s-line" />
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item
            v-for="(item, index) in info.extension.dropdownOption.value"
            :key="index"
            :command="item"
            :disabled="item.disabled"
            :divided="item.divided"
          >
            <vui-icon v-if="(item.icon || {}).value" :icon="(item.icon || {}).value" />
            {{ item.label }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import { UiMixin, ElementsFormMixin, RefsInjectMixin, ConditionMixin } from '@ve/mixin'
  import { actionsTask } from '@ve/eventTask/index'
  export default defineComponent({
    name: 'UiDropdown',
    components: {},
    mixins: [UiMixin, ElementsFormMixin, RefsInjectMixin, ConditionMixin],
    data() {
      return { onShow: true }
    },
    computed: {
      dropdownTrigger() {
        return this.info.extension.trigger.value
      },
    },
    watch: {
      dropdownTrigger() {
        this.onShow = false
        this.$nextTick(() => {
          this.onShow = true
        })
      },
    },
    methods: {
      dropdownChange(e) {
        if (!this.getHasPreview) {
          return
        }
        setTimeout(() => {
          this.onHandClick()
          if (e.actions) {
            actionsTask(this, this.info, e.actions, {}, () => {
              console.log('TAB 完成了')
            })
          }
        }, 100)
      },
    },
  })
</script>
<style scoped>
  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
    display: flex;
    align-items: center;
  }
</style>
